<template>
    <a-select v-if="mode=='multiple' || mode=='tags'" @change="handleChange" :value="arrayValue" :disabled="disabled" :mode="mode" show-search :filterOption="filterOption">
       
        <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item['itemValue']">
            <span style="display: inline-block;width: 100%" :title="item['itemText']">
                {{item['itemText']}}
            </span>
        </a-select-option>
    </a-select>
    <a-select v-else @change="handleChange" :value="value" :disabled="disabled" :mode="mode" show-search :filterOption="filterOption">
         <a-select-option value="">
            <span style="display: inline-block;width: 100%" title="请选择">请选择</span>
        </a-select-option>
        <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item['itemValue']">
            <span style="display: inline-block;width: 100%" :title="item['itemText']">
                {{item['itemText']}}
            </span>
        </a-select-option>
    </a-select>
</template>
<script>

import { initDict } from '@/api/dict'
import {StringToJson} from '@/utils/util'

export default {
    name:'LSelect',
    props:{
        value:{
            type:[String,Number,Array,],
        },
        form:{
            type:Object,
            default:()=>{}
        },
        changeItem:{
            type:Object,
            default:()=>{}
        },
        mode:String,
        disabled:{
            type:Boolean,
            default:false
        },
        parentSelect:String,
        dictCode:String,
        field:String,
        replaceFields:{
            type:[Object,String],
            default:()=>{}
        },
        options:{
            type:[Array,String],
            default:()=>[]
        },
        dictParam:{
            type:String,
            default:()=>""
        },
    },
    watch:{
        value (val) {
            if(this.mode=="multiple" || this.mode=="tags"){
                if(!val){
                    this.arrayValue = []
                }else{
                    this.arrayValue = this.value.split(",")
                }
            }
        },
      changeItem:{
        deep:true,
        handler() {
          if(this.changeItem  && this.parentSelect && this.changeItem.hasOwnProperty(this.parentSelect)){
              let itemJson = JSON.parse(JSON.stringify(this.changeItem))
              if(Object.getOwnPropertyNames(itemJson).length==1){
                this.form.setFieldsValue({[`${this.field}`]:''})
                this.fieltByParent()
              }
              
          }
        },
      },
      dictParam(){
        this.initDictData();
      },
      dictCode(){
        this.initDictData();   
      },
      options(){
         this.initDictData();
      }

    },
    created() {
        if(this.replaceFields){
            this.localReplaceFields = StringToJson(this.replaceFields)
        }
        if(this.options){
            this.localOptions = StringToJson(this.options)
        }
       
        //动态加载数据
       this.initDictData()
    },
    data(){
        return{
            dictOptions: [],
            resultOptions:[],
            arrayValue:!this.value?[]:(this.value+'').split(","),
            localReplaceFields:{},
            localOptions:[]
        }
    },
    methods: {
        handleChange(e) {
            if(this.mode=="multiple" || this.mode=="tags"){
                this.$emit('change', e.join(","));
            }else{
                this.$emit('change', e);
            }
            
        },
        initDictData(){
            let that = this
            //先判断是否设置了静态数据
            if(that.localOptions && that.localOptions.length>0){
                that.resultOptions=that.localOptions
                setTimeout(() => {
                    that.fieltByParent()
                }, 200);
                // that.fieltByParent()
                return false
            }
            if(!that.dictCode){
            //   that.$message.warning("未设置字典编码"); 
               return false
            }

            initDict(that.dictCode).then(()=>{
                that.resultOptions = that.$store.state.dict.dictInfo[that.dictCode].dictInfo
                setTimeout(() => {that.fieltByParent()}, 200);
            })
        },
        fieltByParent(){
            if(this.parentSelect){
                if(!this.form){
                    this.$message.warning("下拉组件设置了级联属性，未设置FORM属性");
                    return false
                }
                let pv = this.form.getFieldValue(this.parentSelect)
                if(pv){
                    
                    //如果父级下拉是多选模式
                    if(Array.isArray(pv)){
                        this.dictOptions = this.resultOptions.filter(item => {
                           if(item["itemFilter"]){
                                return pv.includes(item["itemFilter"])
                            }else{
                                
                               return false
                            }
                        })
                    }else{
                        this.dictOptions = this.resultOptions.filter(item => {
                            if(item["itemFilter"]){
                                return item["itemFilter"]==pv
                            }else{
                                
                               return false
                            }
                        })
                    }
                    
                }else{
                    this.dictOptions=[]
                }
               
            }else{
                this.dictOptions = Object.assign([],this.resultOptions);
            }
            
        },
        filterOption(inputValue,option){
            return (
                option.componentOptions.children[0].data.attrs.title
                .toLowerCase()
                .indexOf(inputValue.toLowerCase()) >= 0
            )
        }
    }
}
</script>